<template>
<!--  @ok="handleSubmit"-->
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      showFooter
      :title="getTitle"
      width="70%"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <!--    <BasicForm @register="registerForm"> </BasicForm>-->
      <!--    :label-col="labelCol"-->
      <!--    :wrapper-col="wrapperCol"-->
      <Form
        :model="formData"
        label-align="right"
        ref="formRef"
      >
        <FormItem
          name="orderNo"
          label="出库单号"
          :required="true"
        >
          <Input
            placeholder="请输入出库单号"
            v-model:value="formData.orderNo"
          ></Input>
        </FormItem>
        <FormItem
          name="list"
          label="出库商品"
          :required="true"
        >
          <SelectStorageList :orderNo="formData.orderNo" @success="productSpecSuccessFn" @close="closeModal" ref="selectStorage"></SelectStorageList>
        </FormItem>
      </Form>
    </BasicModal>

    <Modal v-model:visible="visible" title="提示信息" @ok="handleOk">
      <p v-for="(item, index) in msgList">第{{ item.index }}行 {{ item.message }}</p>
    </Modal>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed, unref} from 'vue';
import {BasicForm, useForm} from '@/components/Form';
import {formSchema} from './role.data';
import {BasicModal, useModalInner} from '@/components/Modal';
import SelectStorageList from "../components/SelectStorageList/index.vue"
import {BasicTree, TreeItem} from '@/components/Tree';
import { getNoApi} from '@/api/sys/wmProduct';
import { Modal, } from 'ant-design-vue';

import {
  Form,
  FormItem,
  Input,
  Divider
} from 'ant-design-vue';
import {columns, orderColumns, searchFormSchema} from './role.data';
import {useMessage} from '@/hooks/web/useMessage';
import {useRefs} from '@vben/hooks';
import util from "@/utils/util";
import {outStorageApi} from "@/api/sys/wmStorage";

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const treeData = ref<TreeItem[]>([]);
const {refs, setRefs} = useRefs();

const {createMessage} = useMessage();

const formSchemaList = ref(formSchema)
const formData = ref({});
const labelCol = ref({span: 10});
const wrapperCol = ref({span: 13});
const formRef = ref();

const loading=ref(false);

const selectStorage=ref();

const id = ref('');
const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
  labelWidth: 90,
  baseColProps: {span: 24},
  schemas: formSchema,
  showActionButtonGroup: false,
});

const [register, {setModalProps, closeModal}] = useModalInner(async (data) => {
  //打开弹层后的回调
  setModalProps({confirmLoading: false});

  isUpdate.value = data?.isUpdate;
  formData.value={orderNo:"",list:[]};
  id.value = '';
  if (unref(isUpdate)) {
    // console.log("---data.record:",data.record)
    id.value = data.record.id;

  } else {
    getNoApi({type: "out_store"}).then((res) => {
      //console.log(res)
      if (res.code == 200) {
        formData.value.orderNo = res.data;
        // selectStorage.value.initFn();
      }
    });

  }
});

const getTitle = computed(() => (!unref(isUpdate) ? '新增出库信息' : '编辑入库信息'));

const msgList=ref([]);
const visible=ref(false);



function closeFn() {
  closeModal()
  emit("success");

}

function productSpecSuccessFn(list) {
  formData.value.list=list;
  submitFn()
}

function submitFn() {
  formRef.value
    .validate()
    .then(() => {
      const values =unref(formData.value)  ;
      outStorageApi(values).then(res=>{
        loading.value = false;

        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            let msg="";
            for(let i=0;i<res.data.length;i++){
              let row= res.data[i];
              msg+=`第${row.index}行 ${row.message}\n`
            }
            msgList.value = res.data;
            visible.value = true;
          } else {
            createMessage.success('导入成功!');
            closeFn();
          }
        } else {
          loading.value = false;

          createMessage.error(res.message);
        }
      })
    })
}

function handleOk() {
  visible.value = false;
}


</script>

<style lang="less">

.m_w_100 {
  width: 90%;

  .ant-col-6 {
    flex: 0 0 10%;
    max-width: 10%;
  }
}

.ant-form {
  .ant-form-item {
    margin-bottom: 10px;
  }
}
</style>
